Getting Started
Easy Video Player is a powerful and unique responsive video player that can play local, self-hosted or streaming video & audio single source files with one or multiple qualities, Youtube, Vimeo, Vimeo Pro, Live streaming, HLS, DASH MPEG, 360-degree videos / VR, Google Adsense, VAST & VMAP and much more.
Please note that the Easy Video Player WordPress Plugin installation and configuration is not complicated but because it has a lot of customizable settings it might seem complicated, so please go through the entire help file and watch the video tutorial before trying to install it into your own WordPress site.
Easy Video Player is compatible with any WordPress theme and it has no dependencies.
Installation
After purchasing the plugin from CodeCanyon, inside the main zip file you will find installable plugin fwdevp.zip, video tutorial
Installation steps
- 1. In your WordPress Admin Dashboard, go to Plugins > Add New.
- 2. Upload the fwdevp.zip plugin file that you downloaded from CodeCanyon.
- 3. Click on install now.
- 4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer.
Update
Uninstall and delete the current installed version, doing this will not remove any of the settings or playlists, install the new version by following the steps from the installation section above, and if you are using a cache plugin clear the browser cache with it to make sure the old files are not used.
Usage
The plugin is constructed of two sections, the preset settings which is used to create presets and modify the player functionality and the CSS section which is used to update surten CSS aspects of the plugin for example subtitle format.
Plase note that I have created a detailed video tutorial explaning everything you need to know about how to install and use the plugin, so I encourage you to watch it from start to end.
Presets
Frist step is to create your own preset, just enter your preset name in the preset name input and click on the Add preset button, after this you will have access to an Update preset button that allows to save the modified preset settings. Please note all preset settings are self explanatory and the ones that need more information have a tooltip attached to them.
Shortcode
After the preset is created use the shortcode generator to add the player in your page, post or custom post.
Resources
This section contains useful resorces and information about the plugin usage and it's features.
360 VR videos
Please watch this video tutorial.
VAST / VMAP / Google IMA
Please watch this video tutorial and this video tutorial.
Multiple video qualities
Please watch this video tutorial.
Second video source
This feature allows to add a second video source as a fail safe if the first one can't be loaded, please watch this video tutorial.
Google Drive
For this I have created a video tutorial, pelase watch it from start to end.
https://www.googleapis.com/drive/v3/files/[file_id]?alt=media&key=[api_key]&v=[.mp4][.mp3]
Example of working .mp4 file https://www.googleapis.com/drive/v3/files/0B4Au_agYmWFZNHNtZTlXUm1UUUE?alt=media&key=AIzaSyBsJ8HRNI4iHUqpszDtx3Ijq3ZKoXLUx-E&v=.mp4 and mp3 file https://www.googleapis.com/drive/v3/files/0B4Au_agYmWFZVG0zc2pzalVCVjg?alt=media&key=AIzaSyBsJ8HRNI4iHUqpszDtx3Ijq3ZKoXLUx-E&v=.mp3 .
Dropbox
Copy the drop box video or audio link, then replace www.dropbox.com with dl.dropboxusercontent.com.
Thus the URL: https://www.dropbox.com/s/abcd/file.mp4?dl=0&type=.mp3 will become: https://dl.dropboxusercontent.com/s/acbd/file.mp4?dl=0&type=.mp3 . If you are using mp4 files change the type to .mp4 like this &type=.mp4 .
Google adsenses
Please watch this video tutorial for more info.
Starting the video at a specified time using timestamps
It is possible to start and / or stop a video at a specified time adding a timestamp as part of the player URL, the format should be t=hours[h]minutes[m]seconds[s] the hours, minutes and seconds should be higher the 59, some examples as follows to start a video t=0h2m30s or to stop a video e=0h2m40s, to start and stop use something like t=0h2m30s&e=0h2m35s
.This string is part of the URL for example http://www.videoplayer-domain.com/#t=0h30m2s&e=0h30m20s.
Thumbnails preview
Please follow this .vtt video tutorial and live thumbnail preview tutorial here.
Chromecast
Please follow this video tutorial.
Replace default WordPress video player
Please follow this video tutorial.
Google analytics
Please watch this video tutorial for more info.
Open in lightbox
There are two ways to open EVP in a lightbox on is with code and the other one is with an extra shortcode, first example is with code... the below code add it in the text editor in the text tab, also make sure that you set in your preset the display type to lightbox. Please see this video tutorial for more info.
<script type="text/javascript">
var lightboxIntervalId;
openLightboxWhenPageReady();
function openLightboxWhenPageReady(){
clearInterval(lightboxIntervalId);
if(window["fwdevpPlayer0"]){
window["fwdevpPlayer0"].showLightbox();
}else{
lightboxIntervalId = setInterval(openLightboxWhenPageReady, 100);
}
};
</script>
To open the player by clicking a button or an image (a HTML element) use the code below
<button type="button" onclick="window['fwdevpPlayer0'].showLightbox()">Open in lightbox</button>
Second way to open the lightbox is to use an extra shortcode, exampl below and it is explained in detail in this video tutorial.
[fwdevp-lightbox instanceName="fwdevpPlayer0" opener="" auto_open=""]Open in lightbox[/fwdevp-lightbox]
API - Application Programming Interface
This section is for developers that want to use the plugin API. The following lists represent all the public API methods and event listeners that can be used from the player externally.
You can access the player instances by their order in the page with the "fwdevpPlayer" name with its order after it, starting from 0. For example if you have 2 instances their names are "fwdevpPlayer0" and "fwdevpPlayer1". Here is an example how to use the API in the WordPress editor or in a code section of your page:
<script type="text/javascript">
addEvents();
function addEvents(){
if (!window.fwdevpPlayer0){
setTimeout(addEvents, 100);
}else{
fwdevpPlayer0.addListener(FWDEVPlayer.READY, onReady);
fwdevpPlayer0.addListener(FWDEVPlayer.PLAY, onPlay);
}
}
function onReady(){
console.log("player ready");
}
function onPlay(){
console.log("video url: " + fwdevpPlayer0.getVideoSource());
}
function playVideo(){
fwdevpPlayer0.play();
}
</script>
<!-- Add a button -->
<button onclick="playVideo()">Play video</button>
Methods:
getVideoSource
getVideoSource():String
Return the video source path if the video is from the server or youtube id if the video is playing from youtube.
getPosterSource
getPosterSource():String
Return the poster source.
getCurrentTime
getCurrentTime(val:String):String
Return the current time. The val parameter can be text(hh:mm:ss), seconds or milliseconds.
- val (String - required) - this can be seconds or milliseconds.
getTotalTime
getTotalTime(val:String):String
Return the video total time / duration.The val parameter can be text(hh:mm:ss), seconds or milliseconds.
- val (String - required) - this can be seconds or milliseconds.
goFullScreen
goFullScreen():void
Set video player to fullscreen.
play
play():void
Start / play playback.
pause
pause():void
Pause playback.
stop
stop():void
Stops the playback and the loading process if the loading process has started.
play
play():void
Start / play playback.
setVideoSource
setVideoSource(source:String):void
Set the video source.
- source (String - required) - the video source, absolute or relative video src.
setPosterSource
setPosterSource(source:String):void
Set the poster source.
- source (String - required) - the poster source, absolute or relative image poster source (.jpg, .jpeg, .png).
setVolume
setVolume(val:Number):void
Set the video volume.
- val (Number - required) - a number between 0 (video mute state) and 1 (video maximum volume).
scrub
scrub(val:Number):void
Notify instance to scrub (set the video position).
- val (Number - required) - a number between 0 (video start position) and 1 (video end position).
scrubbAtTime
scrubbAtTime(val:String):void
Notify instance to scrub at a specified time.
- val (String - required) - the val argument has to be in hours:minutes:seconds format ex:00:01:20.
stopVideo
stopVideo():void
Stops the playback and the loading process if the loading process has started.
Events:
ready
FWDEVPlayer.READY
Dispatched when the Easy Video Player instance API is actually available.
error
FWDEVPlayer.ERROR
Dispatched when the Easy Video Player instance can't load or play the source.
- error (String) - the error message, ex:e.error.
goFullScreen
FWDEVPlayer.GO_FULLSCREEN
Dispatched when the Easy Video Player is set to fullscreen.
goNormalScreen
FWDEVPlayer.GO_NORMALSCREEN
Dispatched when the Easy Video Player is set to normalscreen.
stop
FWDEVPlayer.STOP
Dispatched when the Easy Video Player instance is stopped.
play
FWDEVPlayer.PLAY
Dispatched when the Easy Video Player instance playback start to play.
stop
FWDEVPlayer.STOP
Dispatched when the Easy Video Player instance is stopped.
pause
FWDEVPlayer.PAUSE
Dispatched when the Easy Video Player instance playback is paused.
update
FWDEVPlayer.UPDATE
Dispatched when the Easy Video Player instance is playing and it's position is changing.
- percent (Number) - the update percent, ex:e.percent, a value from 0 to 1.
updateTime
FWDEVPlayer.UPDATE_TIME
Dispatched when the Easy Video Player instance current duration is changing. This event has two properties of type string curTime and totalTime.
- curTime (String) - the current time, ex:e.curTime.
- totalTime (String) - the total time time, ex:e.totalTime.
playComplete
FWDEVPlayer.PLAY_COMPLETE
Dispatched when the Easy Video Player instance playback has reached the end of the video file.
playbackRateChange
FWDEVPlayer.PLAYBACK_RATE_CHANGE
Dispatched when the Easy Video Player playback rate is changed.
- rate (String) - that returns the current playback rate.
safeToScrub
FWDEVPlayer.SAFE_TO_SCRUB
Dispatched when the Easy Video Player instance is safe to scrub.
Notes
I've been working on this plugin since 2006 and I will continue to improve it and add new features, during this time, I got very good at supporting Easy Video Player, understanding my clients, adding new features and fix bugs that are inevitable in this crazy WEB world.
For me this is more than a job, it is my passion, I love to create innovative tools that my clients can benefit from. @Tibi - FWD.
For support and customizations please write to me directly at this email.